<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<title>支付</title>
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/cmms.css" />
		<link rel="stylesheet" href="../../css/sale/bespeak/bespeak.css" />
		<link rel="stylesheet" href="../../css/doctor/pay.css" />
		<link rel="stylesheet" href="../../css/sale/pay/pay.css" />
		<script src="../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css"> 
		
	</style>
	<body>
		<div class="mui-content" id="pay" v-cloak>
		    <div class="mui-content">
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item mui-active" href="#item1mobile">
							待支付{{pendorderSize}}
						</a>
						<a class="mui-control-item" href="#item2mobile">
							已支付{{payorderSize}}
						</a>
					</div>
					<div class="mui-slider-progress-bar mui-col-xs-6"></div>
					<div class="mui-slider-group">
						<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div  class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<section class="panel to-be-paid" v-for="(pendOrder,index) in pendPayList">
										<ul class="mui-table-view"> 
									        <li class="mui-table-view-cell mui-collapse">
									        	<a class="mui-navigate-right" href="#">
													<div class="dividingline">
														<div class="overflow">
															<i class="iconfont icon-icon1"></i>
															<span class="doctor-name">{{pendOrder.partnerHospitalUserName}}</span>
															<span class="right">业务员：{{pendOrder.partnerSaleName}}</span>
														</div>
														<p>{{pendOrder.barcode}} {{pendOrder.partnerHospitalName}}</p>
													</div>
												</a>
									            <div class="mui-collapse-content">
													<div class="border-1px dividingline" v-for="orders in pendOrder.orders">
														<div class="overflow patient" @tap="selectOne(orders.orderId,pendOrder,index)">
															<i class="iconfont icon-tubiaozhizuomoban left" 
														:class="{'icon-xuanzhong':orders.show}"></i>
															<span class="patientname">{{orders.patientName}}</span>
															<span class="submittime">{{orders.submitTime|replaceT}}</span>
															<span class="btn-detail right" @click="orderDetail(orders.orderId)">详情</span>
														</div>
														<!--<div class="server-code">检验服务码：{{orders.serviceCode}}</div>-->
														<div class="check-item">{{orders.projectName}}</div>
														<div class="overflow item-total">
															共<span>{{orders.projectSize}}</span>个检验项目  
															<span> ¥{{orders.amount}}</span>
															<span class="redColor" v-if="orders.discountProjectAmount!=0"> (项目活动减免 ¥{{orders.discountProjectAmount}})</span>
															<!--<i class="iconfont icon-icon2 right" @tap="del(orders.orderId)"></i>-->
														</div>
													</div>
												</div>
									        </li>
									    </ul>
										<div class="pay-footer overflow">
											<div>
												<div class="num-title">订单数</div>
												<div class="num1">{{pendOrder.orderSize}}</div>
											</div>
											<div>
												<div class="num-title">检验金额</div>
												<div class="num1">{{pendOrder.amount}}	</div>
											</div>
											
											<div>
												<div class="num-title">应付金额</div>
												<div class="num1">{{pendOrder.settleAmount}}</div>
											</div>
											
										</div>
										<div class="pay-footer overflow">
											<div>
												<div class="num-title">优惠券</div>
												<div class="num1">{{pendOrder.discountCouponAmount}}</div>
											</div>
											<div>
												<div class="num-title">活动减免</div>
												<div class="num1">{{pendOrder.discountProjectAmount}}</div>
											</div>
											<div>
												<div class="num-title">红包</div>
												<div class="num1">0</div>
											</div>
										</div>
										<div class="payBtn noBorder">
											<p class="sum num">合计: <span><i>￥</i>{{pendOrder.actualPrice}}</span></p>
											<div>
												<span class="btn-detail1 btn-detail" @tap="useCoupon(index)" v-if="noUseList.length>0" ><span>优惠券</span> <span v-if="pendOrder.discountCouponIds.length>0">{{pendOrder.discountCouponIds.length}}</span></span>
												<span class="btn-primary" :class="{'hidden':pendOrder.isPay}">确认支付</span>
												<span class="btn-primary" :class="{'hidden':!pendOrder.isPay}" @click="confirmPay(pendOrder.partnerHospitalId,pendOrder.partnerHospitalUserId,pendOrder.orders)">确认支付</span>
											</div>
										</div>
									</section>
									<div class="noData" v-show="!pendPayList.length>0">
										<p><img src="../../img/nodata.png"/></p>
										<p>暂无内容</p>
									</div>
								</div>
							</div>
						</div>
						<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<section class="panel to-be-paid paid">
										<p>今日已向{{havePayDay.hospitalUserSize}}位医生收款，共{{havePayDay.orderSize}}个订单</p>
								    	<div class="countBox">
								    		<p><span>检验金额</span><span>{{havePayDay.marketPrice}}</span></p>
								    		<p><span>优惠金额</span><span>{{havePayDay.discountAmount}}</span></p>
								    		<p><span>应收金额</span><span>{{havePayDay.settlePrice}}</span></p>
								    		<p><span>实收金额</span><span>{{havePayDay.actualPrice}}</span></p>
								    	</div>
									</section>
									<section class="panel to-be-paid paid"  v-for="havePay in havePayList">
										<div class="dividingline">
											<div class="overflow">
												<i class="iconfont icon-icon1"></i>
												<span class="doctor-name">{{havePay.partnerHospitalUserName}}</span>
												<span class="right">业务员：{{havePay.partnerSaleName}}</span>
											</div>
										</div>
										<div class="clinic-addr">{{havePay.barcode}} {{havePay.partnerHospitalName}}</div>
										<div class="pay-footer overflow" @tap="order(havePay.payId)">
											<div>
												<div class="num-title">订单数</div>
												<div class="num1 color-333">{{havePay.orderSize}}</div>
											</div>
											<div>
												<div class="num-title">检验金额</div>
												<div class="num1 color-333">{{havePay.amount}}</div>
											</div>
											<div>
												<div class="num-title">优惠金额</div>
												<div class="num1 color-333">{{havePay.discountAmount}}</div>
											</div>
											<div>
												<div class="num-title">应收金额</div>
												<div class="num1 color-333">{{havePay.settleAmount}}</div>
											</div>
											<div>
												<div class="num-title">实收金额</div>
												<div class="num1 color-333">{{havePay.actualPrice}}</div>
											</div>
											<i class="iconfont icon-chakangengduo"></i>
										</div>
										<div class="overflow pay-way">
											<span class="left">{{havePay.payTime}}</span>
											<span class="right">{{havePay.payUser+''|formatPayUser}}付款  {{havePay.payType+''|formatPayType}}</span>
										</div>
									</section>
									<div class="noData" v-show="!havePayList.length>0">
										<p><img src="../../img/nodata.png"/></p>
										<p>暂无内容</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cover" :class="{'show':isShow}"></div>
				<div class="codeModel" :class="{'show':isShow}">
					<span @click="closeModel"><i class="iconfont icon-shanchu"></i></span>
					<span><img :src="srcUrl"/></span>
				</div>
			</div>
			<!--弹出框-->
			<div class="explanation" v-cloak v-if="showModel">
				<div class="mask">
					<div class="title">
						<span>选择优惠券</span>
						<i class="icon iconfont icon-fork" @tap="closeCoupon"></i>
					</div>
					<div class="explanationDetail">
						<div class="abnormalBox" v-for="noUse,index in noUseList">
							<li v-if="noUse.type==3">
								<div class="mui-checkbox mui-left checked">
									<label class="cash" >
										<p>
											<span class="sum"><i>￥</i>{{noUse.discount}}</span>
											<span>代金券</span>
										</p>
										<p><span v-if="noUse.limitAmount==0"></span><span class="right" v-if="noUse.exclusive==1"></span></p>
										<p class="line3">
											<span>使用期限：{{noUse.beginTime|replaceT}}~{{noUse.endTime|replaceT}}</span>
											<span></span>
										</p>
									</label>
									<input name="gender" class="gender" type="checkbox" :checked="true" v-model="noUse.checked" @change="selectCoupon(noUse,index,noUse.id)"/>
								</div>
							</li>
							<li v-if="noUse.type==2">
								<div class="mui-checkbox mui-left">
									<label class="discount">
										<p>
											<span class="sum">{{noUse.discount}}折</span>
											<span>折扣券</span>
										</p>
										<p><span v-if="noUse.limitAmount==0"></span><span class="right" v-if="noUse.exclusive==1"></span></p>
										<p class="line3">
											<span>使用期限：{{noUse.beginTime|replaceT}}~{{noUse.endTime|replaceT}}</span>
											<span></span>
										</p>
									</label>
									<input name="gender" class="gender" type="checkbox" :checked="true" v-model="noUse.checked" @change="selectCoupon(noUse,index,noUse.id)">
								</div>
							</li>
							<li v-if="noUse.type==1">
								<div class="mui-checkbox mui-left" >
									<label class="fullcut">
										<p>
											<span class="sum"><i>￥</i>{{noUse.discount}}</span>
											<span>满减券</span>
										</p>
										<p><span>使用条件：满{{noUse.limitAmount}}减{{noUse.discount}}</span><span class="right" v-if="noUse.exclusive==1"></span></p>
										<p class="line3">
											<span>使用期限：{{noUse.beginTime|replaceT}}~{{noUse.endTime|replaceT}}</span>
											<span></span>
										</p>
									</label>
									<input name="gender" class="gender" type="checkbox" :checked="true" v-model="noUse.checked" @change="selectCoupon(noUse,index,noUse.id)">
								</div>
							</li>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../js/vue.js"></script>
		<script src="../../js/cmms.js?time=333"></script>
		<script>
			new Vue({
				el:"#pay",
				data:{
					isShow:false,
					pendPayList:[],//待支付
					havePayList:[],//已支付
					havePayDay:[],
					srcUrl:'',
					pendorderSize:'',
					inorderSize:'',
					payorderSize:'',
					gallery:'',//slider父元素
					errMsg:'',
					isPay:true,
					showModel:false,
					noUseList:[],
					discountCouponIds:[],
					couponIndex:0
				},
				mounted(){
//					this.gallery = mui('.mui-slider');
					this.muiInit();
					this.pendingPayOrder();
					
				},
				methods:{
					muiInit(){
						mui.init({
							swipeBack: false
						});
						mui('.mui-scroll-wrapper').scroll({
							indicators: true //是否显示滚动条
						});
						let _this = this;
						_this.localUrl = location.href.split('#')[0];
						/*微信支付接口配置*/
						AT.muiAjax('/partner-sale/partnerSale/wxConfig','post',{
								url:_this.localUrl 
							},
							function(res){
//								console.log(res);
								wx.config({
									appId:res.appId,
									timestamp:res.timestamp,
									nonceStr:res.nonceStr,
									signature:res.signature,
									jsApiList:['chooseWXPay']
								});
						});
					},
					/*加载列表信息*/
					pendingPayOrder(){
						let _this = this;
						
						/*待支付*/
						AT.muiAjax('/partner-sale/partnerSale/pendingPaymentOrder','post',
						{},
						function(res){
							console.log(res);
//							_this.pendPayList=res;
							let arrs = res;
							let orders = [];
							for(let i=0;i<arrs.length;i++){
								arrs[i].isPay = true;
								arrs[i]["discountCouponIds"] = [];
								arrs[i]["discountCouponAmount"] = 0;
								arrs[i]["actualPrice"] = (arrs[i].settleAmount*1000-arrs[i].discountProjectAmount*1000)/1000;
								arrs[i]["discountCouponIds"] = [];
								for(let order of arrs[i].orders){
									order.show = true;
								}
							}
							
							_this.pendPayList=arrs;
							_this.pendorderSize = res.length?'('+res.length+')':'';
							/*优惠券*/
							AT.muiAjax('/partner-sale/partnerSale/availableDiscountCoupon','post',{},
							/*可用优惠券*/
							function(res){
								_this.noUseList = res;
								for(let i=0;i<res.length;i++){
									_this.noUseList[i]["checked"] = false;
								}
								console.log(res);
							});
							/*已支付*/
							AT.muiAjax('/partner-sale/partnerSale/havePaymentOrder','post',{						
							},
							function(realData){
	//							console.log(realData);
								_this.havePayList=realData;
								_this.payorderSize = realData.length?'('+realData.length+')':'';
							});
							
							/*业务员今日已完成*/
							AT.muiAjax('/partner-sale/partnerSale/todayHavePaidOrder','post',{						
							},
							function(realData1){
	//							console.log(res);
								_this.havePayDay = realData1;
							});
						});
					},
					selectOne(id,pendOrder,index){
						let _this =this;
						let amountSum = 0;
						let settleAmountSum = 0;
						let orderSizeSum=0;
						let discountProjectAmount = 0;
						let orderIds=[];
						for(let order of pendOrder.orders){
							if(order.orderId==id){
								if(order.show==true){
									order.show = false;
								}else{
									order.show = true;
								}
							}
							if(order.show){
								orderIds.push(order.partnerOrderId);
								orderSizeSum++;
								amountSum +=order.amount*100;
								settleAmountSum +=order.settleAmount*100;
								discountProjectAmount +=order.discountProjectAmount*100;
							}
							if(orderSizeSum>0){
								pendOrder.isPay = true;
							}else{
								pendOrder.isPay = false;
							}
						}
						pendOrder.discountCouponIds = [];
						pendOrder.discountCouponAmount = 0;
						pendOrder.amount = amountSum/100;
						pendOrder.settleAmount = settleAmountSum/100;
						pendOrder.orderSize = orderSizeSum;
						pendOrder.discountProjectAmount = discountProjectAmount/100;
						pendOrder.actualPrice = (settleAmountSum-discountProjectAmount)/100;
						_this.pendPayList[index]=pendOrder;
					},
					/*订单列表*/
					order(payId){
						console.log(payId);
						location.href = './saleOrder.html?id='+payId;
					},
					/*订单详情*/
					orderDetail(orderId){
						location.href = '../sale/orderDetail.html?id='+orderId;
					},
					/*确认支付*/
					confirmPay(partnerHospitalId,partnerHospitalUserId,orders){
						let _this = this;
						
						let orderIds=[];
						for(let order of orders){
							if(order.show){
								orderIds.push(order.partnerOrderId);
							}
						}
						_this.isPay = false;
						AT.muiAjax('/partner-sale/partnerSale/initWeChatPaymentJSAPI','post',{						
							orderIds: orderIds,
							partnerHospitalId: partnerHospitalId ,
							partnerHospitalUserId:partnerHospitalUserId,
							discountCouponIds:_this.pendPayList[_this.couponIndex].discountCouponIds
						},
						function(res){
							wx.chooseWXPay({
						        timestamp:res.timeStamp,         //时间戳，自1970年以来的秒数     
						        nonceStr:res.nonceStr, //随机串     
						        package:res.packageValue,     
						        signType:res.signType,
						        paySign:res.paySign,
						        complete:function(aa){
						        	console.log(aa);
						        	//延迟20秒等待微信回调函数
						        	location.reload();
						        }
						    });
						});
					},
					/*使用优惠券*/
					useCoupon(index){
						this.couponIndex = index;
						let _this = this;
						_this.showModel = true;
						console.log(_this.noUseList);
						let noUseList=_this.noUseList;
						let discountCouponIds=_this.pendPayList[index].discountCouponIds;
						for(let i=0;i<noUseList.length;i++){
							_this.noUseList[i]["checked"] = false;
							for(let j=0;j<discountCouponIds.length;j++){
								if(noUseList[i].id == discountCouponIds[j]){
									_this.noUseList[i]["checked"] = true;
								}
							}
						}
						
					},
					//选择优惠券
					selectCoupon(noUse,index,couponId){
						let _this = this;
						let _index = index;
						let orders = _this.pendPayList[_this.couponIndex].orders;
						let orderIds=[];
						for(let order of orders){
							if(order.show){
								orderIds.push(order.partnerOrderId);
							}
						}
						if(noUse.checked){
							_this.pendPayList[_this.couponIndex].discountCouponIds.push(couponId);
						}else{
							_this.pendPayList[_this.couponIndex].discountCouponIds.splice(_this.pendPayList[_this.couponIndex].discountCouponIds.indexOf(couponId),1);
						}
						AT.muiAjax('/partner-sale/partnerSale/verificationCalculationDiscountCoupon','post',{
							discountCouponIds: _this.pendPayList[_this.couponIndex].discountCouponIds,
							orderIds: orderIds
						},function(res){
							if(res.msg == undefined){
								_this.pendPayList[_this.couponIndex].discountCouponAmount = res.discountCouponAmount;
								_this.pendPayList[_this.couponIndex].actualPrice = res.actualPrice;
							}else{
								_this.$forceUpdate();
								_this.$set(_this.noUseList[_index],'checked',false);
								_this.pendPayList[_this.couponIndex].discountCouponIds.splice(_this.pendPayList[_this.couponIndex].discountCouponIds.indexOf(couponId),1);
								mui.alert(res.msg);
							}
						})
						console.log(_this.pendPayList);
					},
					/*关闭优惠券*/
					closeCoupon(){
						this.showModel = false;
					},
					/*关闭二维码框*/
					closeModel(){
						this.isShow = false;
						location.reload();
					},
					del(id){
						console.log(id)
						let _this = this;
						mui.confirm("确定要取消这条订单么？",'取消订单',['再考虑一下','取消订单'],function(con){
							if(con.index===1){
								AT.muiAjax('/partner-sale/order/delOrderStateById','post',{id:id},function(res){
									mui.toast(res);
//									_this.pendingPayOrder();
									location.reload();
								})
							}
						})
					}
				}
			})
		</script>
	</body>
</html>

